<template>
	<view class="page">
		<view class="address-input">
			<view class="list-input">
				<view class="title">
					<text>收货人</text>
				</view>
				<view class="content">
					<input type="text" placeholder="请填写收货人姓名" v-model="name">
				</view>
			</view>
			<view class="list-input">
				<view class="title">
					<text>手机号</text>
				</view>
				<view class="content">
					<input type="tel" placeholder="请填写收货人手机号" v-model="phone">
				</view>
			</view>
			<view class="list-input">
				<view class="title">
					<text>所在地区</text>
				</view>
				<view class="content flex flex-align">
					<view style="width: 100%;" class="" @click="showMulLinkageThreePicker">{{textquyu}}</view>
					<!-- <input disabled type="text" placeholder-class="line" name="city" v-model="textquyu" placeholder="省市区县、乡镇等"/> -->
				</view>
			</view>
			<view class="list-textarea">
				<view class="title">
					<text>详细地址</text>
				</view>
				<view class="content">
					<textarea type="tel" placeholder="街道/楼牌号等" v-model="address" />
				</view>
			</view>
		</view>
		<view class="tag-default">
			
			<view class="default-address">
				<view class="title">
					<text>默认地址</text>
				</view>
				<view class="switch-default">
					<switch class="red sm" color="#fe3b0f !important" :checked="checked==1" @click="getCheck"></switch>
				</view>
			</view>
		</view>
		<view class="footer-btn">
			<view class="btn" @click="submite">
				<text>保存</text>
			</view>
		</view>
		<mpvue-city-picker themeColor="#222" ref="mpvueCityPicker"
		 @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

<script>
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	export default {
		components: {
			mpvueCityPicker
		},
		data() {
			return {
				addressType: '2',
				checked:0,
				textquyu:'省市区县、乡镇等',
				province:'',
				city:'',
				address:'',
				area:'',
				name:'',
				phone:'',
				code:'',
				id:''
			};
		},
		onLoad(params) {
			this.addressType = params.type||'2';
			uni.setNavigationBarTitle({
				title: this.addressType === '1' ? '编辑收货地址':'新建收货地址'
			})
			if(this.addressType==1){
				this.code = JSON.parse(params.code)
				this.name = this.code.name
				this.textquyu = this.code.province+this.code.city+this.code.area
				this.address = this.code.address
				this.checked = this.code.type
				this.phone = this.code.phone
				this.province = this.code.province
				this.city = this.code.city
				this.area = this.code.area
				this.id=this.code.code
			}
			console.log(this.code)
		},
		methods:{
			getCheck(){
				if(this.checked==0){
					this.checked = 1
				}else{
					this.checked = 0
				}
				console.log(this.checked)
			},
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			},
			onBackPress() {
			  if (this.$refs.mpvueCityPicker.showPicker) {
			  	this.$refs.mpvueCityPicker.pickerCancel();
			    return true;
			  }
			},
			onCancel(e) {
				console.log(e)
			},
			onConfirm(e) {
				console.log(e[0].province)
				let that = this
				that.province = e[0].province
				that.city = e[0].city
				that.area = e[0].area
				that.textquyu = e[0].province+e[0].city+e[0].area
			},
			submite(){
				let that = this
				let data ={}
				if(that.province==''){
					that.tui.toast('请选择城市县')
					return
				}
				if(that.addressType==1){
					data = {name:that.name,phone:that.phone,province:that.province,city:that.city,area:that.area,address:that.address,type:that.checked,code:that.id}
				}else{
					data = {name:that.name,phone:that.phone,province:that.province,city:that.city,area:that.area,address:that.address,type:that.checked}
				}
				that.tui.request("api.auth.address/set", "POST", data, false, false, true).then((res) => {
					that.tui.toast(res.info)
					if (res.code == 1) {
						setTimeout(function(){
							uni.navigateBack()
						},1000)
					}
				}).catch((res) => {})
			},
		}
	}
</script>

<style scoped lang="scss">
	@import 'AddressEdit.scss';
</style>
